﻿@{
	ViewBag.Title = "Ryan Butler.org : Style Form";
	Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Positioning and styling a form with <abbr title="Cascading Style Sheets">CSS</abbr></h1>
<p>When creating web forms, there generally two ways to control the layout: (1) Using tables, or (2)
using <abbr title="Cascading Style Sheets">CSS</abbr>. Developers who are familiar with <abbr title="Cascading Style Sheets">CSS</abbr> can easily position a web form. This increases
structural (<abbr title="Hypertext Markup Language">HTML</abbr> mark-up) and visual (styling form fields) appeal to your web page that is easy
to achieve with a little bit of ingenuity.</p>
<p>In this article, we’ll examine how to use <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> to control the layout of our form. We’ll
briefly cover how we can extend the style sheet to style form fields. As a result, we’ll have a web
form which looks great structurally and visually, works in all modern browsers, and learn some
cool <abbr title="Cascading Style Sheets">CSS</abbr> concepts and techniques.</p>
<p>If you would like to follow along with positioning and styling a web form’s step&#8212;by&#8212;step
development, you’ll find the project file link helpful.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_finished.html")" target="_blank">See Demo</a></p>
<table cellspacing="0" id="tutorials" summary="project files">
<tr>
<td colspan="2" class="header">Printable Version </td>
</tr>
<tr>
<td colspan="2" class="caption"><a href="@Url.Content("~/content/styleform/documents/styleform.pdf")">PDF</a></td>
</tr>
<tr>
<td colspan="2" class="header">Download Project Files </td>
</tr>
<tr>
<td colspan="2" class="caption"><a href="@Url.Content("~/content/styleform/styleform.zip")">Zip file</a></td>
</tr>
</table>
<h3>Open the web form</h3>
<p>From the project downloads, open <span class="special">index.html</span> and have a look at the following mark&#8212;up:</p>
<pre class="brush:html">
&lt;head&gt;
&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
&lt;/head&gt;
</pre>
<p>As you can see from the mark-up above, we have attached a base style sheet.</p>
<h3>Styling the body tag</h3>
<p>Open <span class="special">style.css</span> and set a base font family & size on our form with our body selector:</p>
<pre class="brush:css">
body
{
font-family:Arial, Helvetica, Sans-Serif;
font-size:.85em;
}
</pre>
<p>Save your file. Results should be as illustrated.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_body.html")" target="_blank">Body</a></p>
<h3>Structuring our web form</h3>
<p>Since we want the web form to have a table&#8212;row based look and feel, we’ll use a technique in
<abbr title="Cascading Style Sheets">CSS</abbr> where we duplicate row markup that has a label and input fields for collection of user data:</p>
<pre class="brush:css">
div.row
{
width:500px;
margin:4px auto;
}
</pre>
<p>As you can see from the <abbr title="Cascading Style Sheets">CSS</abbr> rules above:</p>
<ol>
<li>Create a class named <span class="special">row</span>, and select it’s descendent DIV and then we assign the
following property&#8212;values:
<ol type="a">
<li>Width:
<ol type="i">
<li>Set to 200 pixels.</li>
</ol>
</li>
<li>Margin:
<ol type="i">
<li>Set to top and bottom value of 4 pixels, and left and right of auto.</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>As a side note, when we assigned a fixed width on an element, setting left and right margins to
auto, will center the element.</p>
<p>Save your file. Results should be as illustrated.</p>
<p>If you have questions, please follow the link below.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_row.html")" target="_blank">Row</a></p>
<h3>Floating our labels</h3>
<p>To achieve a better presentational feel, we will float our labels:</p>
<pre class="brush:css">
label
{
float:left;
width:200px;
}
</pre>
<p>As you can see from the example above:</p>
<ol>
<li> We select our label selector and assign the following property&#8212;values:
<ol type="a">
<li>Float:
<ol type="i">
<li>Set to left</li>
</ol>
</li>
<li>Width:
<ol type="i">
<li>Set to 200 pixels</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>An item to note, when you float an element left or right, we are removing this element from the
normal flow of the document. This technique is often used when floating two &quot;columns&quot; side by
side in a regular <abbr title="Cascading Style Sheets">CSS</abbr> positioned website.</p>
<p>Save your file. Results should be as illustrated.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_label.html")" target="_blank">Label</a></p>
<h3>Positioning our radio buttons and check boxes</h3>
<p>When dealing with radio buttons and check boxes in <abbr title="Cascading Style Sheets">CSS</abbr>, relying on their native behaviors to
align themselves correctly in the web page won’t work. In other words, we need a way to tame
them. We do this by surrounding them in unordered lists. As a result, presentational wise, you get
the default bullet point appearance. In order to remedy that, we write the following <abbr title="Cascading Style Sheets">CSS</abbr> rule:</p>
<pre class="brush:css">
ul li
{
list-style-type:none;
margin-left:160px;
}
</pre>
<p>As you can see from the example above:</p>
<ol>
<li>We select list items inside their parent unordered list and assign the following property&#8212;values:
<ol type="a">
<li>List&#8212;style&#8212;type:
<ol type="i">
<li>Set to none</li>
</ol>
</li>
<li>Margin&#8212;left:
<ol type="i">
<li>Set to 160 pixels</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>Save your file. Results should be as illustrated.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_bullets.html")" target="_blank">Bullets</a></p>
<h3>Adjusting width and height of the text area</h3>
<p>When working with comment fields in the past, we would typically use the attribute cols or rows
on the text area. Rather than use that deprecated technique, let’s use <abbr title="Cascading Style Sheets">CSS</abbr> to define the width and
height:</p>
<pre class="brush:css">
textarea
{
width:200px;
height:100px;
}
</pre>
<p>As you can see from the example above:</p>
<ol>
<li>We select our textarea, and assign the following property&#8212;values:
<ol type="a">
<li>Width:
<ol type="i">
<li>Set to 200 pixels</li>
</ol>
</li>
<li>Height:
<ol type="a">
<li>Set to 100 pixels</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>Save your file. Results should be as illustrated.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_textarea.html")" target="_blank">Textarea</a></p>
<h3>Styling form fields</h3>
<p>There are a variety of items you can do to spice up your page, including but not limited to:</p>
<ul>
<li>Styling the input tags, which can be done by doing this:</li>
</ul>
<pre class="brush:css">
input
{
background-color:#c90;
color:#fff;
}
</pre>
<p>As you can see from the example above:</p>
<ol>
<li>We use the input tag as our selector, and assign the following property&#8212;values:
<ol type="a">
<li>Background&#8212;color:
<ol type="i">
<li>Set to gold</li>
</ol>
</li>
<li>Color:
<ol type="i">
<li>Set to white</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>A tradeoff to this approach is that we will also style radio buttons (Internet Explorer 11), which
may be an undesirable result. You could get around that by adjusting the rule above into a class
and just styling your text fields.</p>
<p>You can also style the following elements used within a form:</p>
<ul>
<li>Field sets</li>
<li>The background of a web page, separated from the form</li>
<li>Option elements</li>
</ul>
<h3>Modern approaches to styling form fields</h3>
<p>We can style form fields in a more modern way using <abbr title="Cascading Style Sheets">CSS</abbr> 3 behaviors. These items include styling your input and text areas with rounded corners, and changing border colors on hover or focus of each field. Let’s add the following to our existing style sheet:</p>
<pre class="brush:css">
input {
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border:1px solid rgba(0,0,0, 0.2);
}
input:focus {
	box-shadow: 0 0 5px #c90;
	-webkit-box-shadow: 0 0 5px #c90; 
	-moz-box-shadow: 0 0 5px #c90;
	border:1px solid #c90; 
}
</pre>
<p>As you can see from the example above:</p>
<ul>
<li>We target our input selector and assign the following property&#8212;values:
<ul>
<li>Transition:
<ul>
<li>Set to .25 seconds
<ul>
<li>This determines the speed of the transition in the browser</li>
</ul>
</li>
</ul>
</li>
<li>Border&#8212;radius:
<ul>
<li>Set to 3 pixels
<ul>
<li>This causes our input text fields to have rounded corners</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>We target the focus pseudo&#8212;class of our input selector and assign the following property&#8212;values:</p>
<ul>
<li>Box&#8212;shadow:
<ul>
<li>Set to 5 pixels, with a color of gold
<ul>
<li>As you place cursor focus in the input fields, we see a slight glow around the field</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>A few items to note: (1) &#8212;Webkit and &#8212;Moz properties are used to simulate <abbr title="Cascading Style Sheets">CSS</abbr> 3 behaviors in Google Chrome and Apple Safari and Mozilla based web browsers for their respective property&#8212;values. Also, these <abbr title="Cascading Style Sheets">CSS</abbr> 3 behaviors are only supported by modern browsers which support <abbr title="Cascading Style Sheets">CSS</abbr> 3 behaviors.</p>
<p>Save your file. Results should be as illustrated.</p>
<p class="align"><a href="@Url.Content("~/content/styleform/examples/index_css3.html")" target="_blank">CSS 3</a></p>
<h3>Summary</h3>
<p>In this article you learned how to position & style a web form with <abbr title="Cascading Style Sheets">CSS</abbr>. More importantly you
learned how to:</p>
<ul>
<li>How to simulate table rows with <abbr title="Cascading Style Sheets">CSS</abbr></li>
<li>How to control radio buttons and check boxes with an unordered list and position
appropriately</li>
<li>How to control width and height of a text area with <abbr title="Cascading Style Sheets">CSS</abbr></li>
<li>How you could style other elements of a form</li>
</ul>
<p>If you have questions, @Html.ActionLink("contact me","Contact", "Home")</p>
<p><a href="#top">top of page</a></p>